<template>
    <div class="searchTop">
        <svg class="icon" aria-hidden="true" @click="$router.go(-1)">
            <use xlink:href="#icon-zuojiantou"></use>
        </svg>
        <input type="text" placeholder="许嵩" v-model="searchKey" @keydown.enter="enterKey">
    </div>
    <div class="searchHistory">
        <span class="searchSpan">历史</span>
        <span v-for="item in keyWorldList" :key="item" class="spanKey" @click="searchHistory(item)">
            {{item}}
        </span>
        <svg class="icon" aria-hidden="true" @click="delHistory">
            <use xlink:href="#icon-shanchu"></use>
        </svg>
    </div>
    <div class="itemList">
        <div class="item" v-for="(item,i) in searchList.songs" :key="i">
            <div class="itemLeft" @click="updateIndex(item)">
                <span class="leftSpan">{{i+1}}</span>
                <div>
                    <p>{{item.name}}</p>
                    <span v-for="(item1,index) in item.ar" :key="index">{{item1.name}}</span>
                </div>
            </div>
            <div class="itemRight">
                <svg class="icon bofang" aria-hidden="true" v-if="item.mvid !=0">
                    <use xlink:href="#icon-shipin"></use>
                </svg>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-31liebiao"></use>
                </svg>
            </div>
        </div>
    </div>
</template>

<script>
import { defineComponent } from 'vue'

import { getSearchMusic } from '@/request/api/home'

export default defineComponent({
    data() {
        return {
            keyWorldList: [],
            searchKey: "",
            searchList: []
        }
    },
    mounted() {
        this.keyWorldList = JSON.parse(localStorage.getItem('keyWorldList')) ? JSON.parse(localStorage.getItem('keyWorldList')) : []
    },
    methods: {
        updateIndex(item) {
            this.$store.commit('pushPlayList', item)
            this.$store.commit('updatePlayListIndex', this.$store.state.playList.length - 1)
        },
        delHistory() {
            localStorage.removeItem('keyWorldList')
            this.keyWorldList = []
        },
        async enterKey() {
            if (this.searchKey != '') {
                this.keyWorldList.unshift(this.searchKey)
                // 去重
                this.keyWorldList = [...new Set(this.keyWorldList)]
                // 固定长度
                if (this.keyWorldList.length > 10) {
                    this.keyWorldList.splice(this.keyWorldList.length - 1, 1)
                }
                localStorage.setItem('keyWorldList', JSON.stringify(this.keyWorldList))
                let res = await getSearchMusic(this.searchKey)
                // console.log(res)
                this.searchList = res.data.result
                this.searchKey = ''
            }

        },
        async searchHistory(item) {
            let res = await getSearchMusic(item)
            console.log(res)
            this.searchList = res.data.result
            this.searchKey = ''
        }
    }
})
</script>

<style lang="less" scoped>
.searchTop {
    width: 100%;
    height: 1rem;
    padding: 0 .2rem;
    display: flex;
    align-items: center;

    input {
        margin-left: .4rem;
        border: none;
        border-bottom: 1px solid #999;
        width: 85%;
        padding: .1rem;
    }
}

.searchHistory {
    width: 100%;
    padding: .2rem;
    position: relative;

    .searchSpan {
        font-weight: 700;
    }

    .spanKey {
        background-color: rgb(138, 197, 229);
        padding: .1rem .2rem;
        border-radius: .4rem;
        margin: .1rem .2rem;
        display: inline-block;
    }

    .icon {
        width: .3rem;
        height: .3rem;
        position: absolute;
        right: .2rem;
    }
}

.itemList {
    width: 100%;
    height: 40rem;
    padding: 0 .2rem;
    display: flex;
    flex-direction: column;

    .item {
        width: 100%;
        height: 2rem;
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: .1rem 0;
        border-bottom: 1px solid #999;


        .itemLeft {
            width: 80%;
            height: .8rem;
            display: flex;
            justify-content: space-around;
            align-items: center;

            div {
                width: 85%;
                height: 100%;
                // padding-left: .4rem;
                // background-color: orange;
                white-space: nowrap; //让文本不换行，在同一行里面
                overflow: hidden; //让超出的范围进行隐藏
                text-overflow: ellipsis; //超出的部分用省略号表示


                p {
                    display: block;
                    width: 100%;
                    height: .3rem;
                    font-size: .3rem;
                    font-weight: 700;
                    margin-bottom: .1rem;
                }

                span {
                    // display: flex;
                    // background-color: aqua;
                    width: 100%;

                    // height: .24rem;
                    font-size: .24rem;
                    color: #999;
                }
            }
        }

        .itemRight {
            width: 20%;
            height: 100%;
            display: flex;
            justify-content: flex-end;
            align-items: center;

            svg {
                fill: rgb(115, 106, 106);
                width: .5rem;
                height: .5rem;
                padding-right: .05rem;
            }
        }
    }
}
</style>